<template>
    <div>
        <comcart>
            <div slot="body_name">   
            
  <el-table
    :data="tableData"
    style="width: 100%">
   
    <el-table-column type="expand">
      <template slot-scope="{row}">
        <el-row v-for="(item,index) in row.children" :key="item.id">
          <el-col :span="8">
             <el-tag>{{item.authName}}</el-tag>
          </el-col>

              <el-col :span="16">
                <el-row v-for="(two) in item.children":key="two.id">
                  <el-col :span="6">
                    <el-tag type="success">{{two.authName}}</el-tag>
                     <i class="el-icon-caret-right"></i>
                  </el-col>

                  <el-col :span="10">
                    <el-row v-for="(three) in two.children" :key="three.id">
                      <el-tag type="danger" closable @close="del(row.id,two.children,index,three.id)">{{three.authName}}</el-tag>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
        </el-row>
         
        </el-form>
      </template>
      
    </el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
   
        <el-table-column label="操作" width="300px">
          
         <template slot-scope="{ row }" >
            <el-button type="primary" @click="update(row)">编辑</el-button>
            <el-button type="danger" @click="delte(row)">删除</el-button>
            <el-button type="warning" @click="give(row)">分配权限</el-button>
            
            </template>
           
        </el-table-column>
               
         <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
      <el-button type="primary" @click="add()">添加角色</el-button>
      </template>
      </el-table-column>
  </el-table>
  <!-- 修改角色描述和名称弹窗 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    <el-form>
            <el-form-item label="角色名称" label-width="100px">
              <el-input v-model="searchObj.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" label-width="100px">
              <el-input v-model="searchObj.roleDesc"></el-input>
            </el-form-item>
           
          </el-form>

  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="sure()">确 定</el-button>
  </div>
</el-dialog>

<!-- 添加权限弹窗 -->
  <el-dialog title="用户权限分配" :visible.sync="isshow">
         
            <el-tree 
             :data="treeData" 
             :props="treeAttr"
             show-checkbox
             default-expand-all
             node-key="id"
             ref="tree"
             highlight-current
             :default-checked-keys="treeAcitveIds"
             
             ></el-tree>
          <div slot="footer" class="dialog-footer">
            <el-button @click="setAll">全选</el-button>
            <el-button @click="resetChecked">清空</el-button>
            <el-button @click="kong">取 消</el-button>
            <el-button type="primary" @click="setinto()">确 定</el-button>
          </div>
  </el-dialog>
  <!-- 添加弹窗 -->
   <el-dialog title="收货地址" :visible.sync="addFormVisible">
    <el-form>
            <el-form-item label="角色名称"  label-width="100px">
              <el-input v-model="addObj.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述"  label-width="100px">
              <el-input v-model="addObj.roleDesc"></el-input>
            </el-form-item>
           
          </el-form>
  
  <div slot="footer" class="dialog-footer">
    <el-button @click="kong()">取 消</el-button>
    <el-button type="primary" @click="addgo()">确 定</el-button>
  </div>
</el-dialog>

            </div>
        </comcart>
    </div>
</template>

<script>
import comcart from "../../components/comcart";
export default {
  components: {
    comcart,
  },
  data() {
    return {
      addFormVisible: false,
      isshow: false,
      dialogFormVisible: false,
      tableData: [],
      searchObj: {
        roleId: 0,
        id: 0,
        roleName: "", //角色名称
        roleDesc: "", //角色描述
      },
      treeData: [], //树形组件的数据源
      treeAttr: {
        children: "children",
        label: "authName",
      },
      treeAcitveIds: [], //默认选中的数组
      addObj:{
        roleId:"",
        roleName:"",
        roleDesc:"",
      }
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    //分配权限按钮
    async give(row) {
      this.isshow = true;
      let rst = await this.$http.get("rights/tree");
      console.log(rst);
      let { data, meta } = rst;
      let { status, msg } = meta;
      this.treeData = data;

      //递归
      this.setids(row, this.treeAcitveIds);
      console.log(this.treeAcitveIds, row);
      this.$refs.tree.setCheckedKeys(this.treeAcitveIds);
      this.roleId = row.id;
    },
    //递归函数，只获取最后一级菜单的ID
    setids(obj, arr) {
      if (!obj.children) {
        arr.push(obj.id);
        return;
      }
      obj.children.forEach((item) => {
        this.setids(item, arr);
      });
    },
    //数据渲染
    async query() {
      let rst = await this.$http.get("roles", this.searchObj);
      // console.log(rst);
      let { id, roleName, roleDesc } = rst;
      this.tableData = rst.data;
      this.searchObj.id = id;
      this.searchObj.roleName = roleName;
      this.searchObj.roleDesc = roleDesc;
    },
    //数据回填
    async update(row) {
      this.dialogFormVisible = true;
      let rst = await this.$http.get(`roles/${row.id}`);
      // console.log(rst)
      let { roleName, roleDesc, roleId } = rst.data;
      this.searchObj.roleName = roleName;
      this.searchObj.roleDesc = roleDesc;
      this.searchObj.roleId = roleId;
    },
    //确认修改
    async sure() {
      this.dialogFormVisible = false;
      // console.log(this.searchObj.roleId);
      let rst = await this.$http.put(`roles/${this.searchObj.roleId}`, {
        roleName: this.searchObj.roleName,
      });
      console.log(rst);
      this.query();
    },
    //删除下拉角色指定权限
    async del(id, arr, index, rightid) {
      let rst = await this.$http.delete(`roles/${id}/rights/${rightid}`);
      console.log(rst);
      arr.splice(index, 1);
    },
    //删除单行
    delte(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let rst = await this.$http.delete(`roles/${row.id}`);
          console.log(rst);
          this.query();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          if (this.tableData.length == 1) {
            if (this.fromObj.pagenum >= 1) {
              this.fromObj.pagenum--;
            }
          }
          this.query();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //分配权限
    async setinto() {
      //获取所有选中的复选框的值
      let son_ids = this.$refs.tree.getCheckedKeys();
      //获取所有半选中状态的节点id
      let half_ids = this.$refs.tree.getHalfCheckedKeys();
      let arr = [...son_ids, ...half_ids].join();
      console.log(this.roleId, arr);
      let rst = await this.$http.post(`roles/${this.roleId}/rights`, {
        rids: arr,
      });
      console.log(rst);
      
      this.isshow = false;
      this.query();
      this.resetChecked();
    },
    //清空树形选中
    resetChecked() {
      this.treeAcitveIds = [];
      this.$refs.tree.setCheckedKeys(this.treeAcitveIds);
    },
    //全选树形按钮
    setAll() {
      this.treeData.forEach((item) => {
        this.setids(item, this.treeAcitveIds);
      });

      this.$refs.tree.setCheckedKeys(this.treeAcitveIds);
    },
    //清空
    kong(){
      this.isshow=false
      this.resetChecked()
      this.query()
    },
        //添加
    add() {
      this.addFormVisible = true; //控制添加弹窗
    },
    async addgo() {

      let rst = await this.$http.post("roles",this.addObj);
      console.log(rst);
      this.addFormVisible = false;
      this.query()
    },
  },
};
</script>

<style lang="less" scoped>
.bb {
  margin-left: 960px;
}
</style>